<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat</title>
    <style>
	/* 设置基本样式 */
html,body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
	width: 100%;
	height: 100%;
}

.chat-container {
    max-width: 90%;
	height: 80%;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
}

.chat-display {
    padding: 10px;
    background-color: #f9f9f9;
    overflow-y: scroll;
	height: 78%;
}

.chat-input {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #f5f5f5;
}

.chat-input input {
    flex-grow: 1;
    margin-right: 10px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.chat-input button {
    padding: 5px 10px;
    background-color: #428bca;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.message img {
    border-radius: 30px;
}

	</style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-display">
            <!-- 对话展示框将在这里 -->
        </div>
        <div class="chat-input">
            <input type="text" id="message-input" placeholder="请输入内容">
            <button id="submit-btn">发送</button>
        </div>
    </div>

</body>
<script>

// 获取元素
const messageInput = document.getElementById('message-input');
const submitBtn = document.getElementById('submit-btn');
const chatDisplay = document.querySelector('.chat-display');

chatDisplay.height = window.innerHeight-20 + "px";


// 添加事件监听器
submitBtn.addEventListener('click', sendMessage);

// 定义函数：发送消息
function sendMessage() {
    // 获取输入的消息内容
    const message = messageInput.value;
    
    // 创建一个新的消息元素
    const newMessage = document.createElement('div');
    newMessage.classList.add('message');
    
    // 设置消息内容和样式
    newMessage.innerHTML = '<span style="padding-right: 5px; text-align: justify;">' + message + '</span>';
    newMessage.style.backgroundColor = '#428bca';
    newMessage.style.color = 'white';
    newMessage.style.padding = '5px 10px';
    newMessage.style.marginBottom = '10px';
    // 获取用户头像的URL
	const avatarUrl = 'http://127.0.0.1:8888/forYou/favicon.ico';

	// 创建并设置头像元素
	const avatar = document.createElement('img');
	avatar.src = avatarUrl;
	avatar.width = 40;
	avatar.height = 40;

	// 将头像元素添加到消息元素的前面
	newMessage.appendChild(avatar);

	// 获取当前用户的用户名
	const username = 'User';

	// 设置消息的样式
	if (username === 'User') {
		// 用户的消息样式
		newMessage.style.backgroundColor = '#428bca';
		newMessage.style.color = 'white';
	} else {
		// 对方的消息样式
		newMessage.style.backgroundColor = '#f5f5f5';
		newMessage.style.color = '#333';
	}
	newMessage.style['text-align'] = 'right';
	newMessage.style['display'] = 'inline-flex';
	newMessage.style['justify-content'] = 'right'
	newMessage.style['align-items'] = 'center'
	newMessage.style['width'] = '98%'

    // 将消息添加到对话展示框中
    chatDisplay.appendChild(newMessage);
    
	answer(messageInput.value);
    // 清空输入框
    messageInput.value = '';
}

// 定义函数：发送消息
function answer(problem) {
    // 获取输入的消息内容
    const message = problem;
    
    // 创建一个新的消息元素
    const newMessage = document.createElement('div');
    newMessage.classList.add('message');
    
    // 设置消息内容和样式
    newMessage.innerHTML = '<span style="padding-left: 5px; text-align: justify;">' + message + '</span>';
    newMessage.style.backgroundColor = '#428bca';
    newMessage.style.color = 'white';
    newMessage.style.padding = '5px 10px';
    newMessage.style.marginBottom = '10px';
    // 获取用户头像的URL
	const avatarUrl = 'http://127.0.0.1:8888/forYou/favicon.ico';

	// 创建并设置头像元素
	const avatar = document.createElement('img');
	avatar.src = avatarUrl;
	avatar.width = 40;
	avatar.height = 40;

	// 将头像元素添加到消息元素的前面
	newMessage.insertBefore(avatar, newMessage.firstChild);

	// 获取当前用户的用户名
	const username = 'ass';

	// 设置消息的样式
	// 对方的消息样式
	newMessage.style.backgroundColor = '#f5f5f5';
	newMessage.style.color = '#333';
	newMessage.style['align-items'] = 'center'
	newMessage.style['width'] = '98%'
	newMessage.style['display'] = 'inline-flex';


    // 将消息添加到对话展示框中
    chatDisplay.appendChild(newMessage);
    
    // 清空输入框
    messageInput.value = '';
}
</script>
</html>
